Drop-Down Menus

This part of the tutorial uses an embedded style sheet for a change. Observe that the div.menu uses the :hover pseudo class to change the style of a link when the mouse "hovers" over it.

The display property is used to determine how to display the chosen element. This element may be a block or an inline element. It may also be none, in which case the element is not displayed. In this case, the style sheet sets the display to none for all anchor (a) elements in the div.menu. The div.menu:hover forces the display to block when the mouse is over the a elements. Please notice the subtle but very important difference between div.menu:hover a, which causes the entire block to display when the mouse is over it and div.menu a:hover, which causes the background color of each a element to override the block color when the mouse is over it! Tyr all of this in your browser to understand it.

Menu CSS inline styles CSS Embedded style sheets CSS External style sheets Borders Floating Elements

User Style Sheets

To add a user style sheet in the IE, click Tools in the menu bar, then Internet Options, then Accessibility which opens up a dialog box. In this box, click Format documents using my styyle sheet and browse to find the sheet you want to use. You should also try the built-in formatting options. If you edit your user style sheet you will not see the result take effect by simple reloading the web page, as with all other changes to your XHTML or CSS code. This is because the IE refresh does not refresh the Internet Options settings in the browser. To do this, you must detach the user style sheet by unchecking the box in the Accessibility dialog box and rechecking it. Try all of this now with the user style sheet chistyle.css. The IE will apply your style sheet to every page which it loads, so watch out for unintended effects!

User Style Sheets let the user override the styles chosen by the web developer. This feature of CSS is really useful for anyone who does not like to read small fonts like this. BUT, user style sheets do not alwsys work the way you want, so let's try again

User Style Sheets let the user override the styles chosen by the web developer. This feature of CSS is really useful for anyone who does not like to read small fonts like this. OK, that's better.

Here is the explanation: When the font-size is specified absolutely, as with "8pt", the author style has higher precedence than the user style. But when the font-size is specified relatively, as with "0.8em", the author style does not override the user style, and the font size is relative to the font-size specified in the user style sheet.

This is the End of the tutorial on Cascading Style Sheets!

Please click here to go to the tutorial on JavaScript